// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_text.less";

.@{prefix}-cascader {
  position: relative;
  width: @cascader-input-width;
  border: @cascader-border;
  border-radius: @border-radius;
  padding: @cascader-input-padding;
  background-color: transparent;
  vertical-align: middle;
  cursor: default;
  color: @cascader-color-default;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-wrap: wrap;
  transition: border-color @anim-duration-base @anim-time-fn-ease-in;

  &:hover:not(.@{prefix}-is-disabled) {
    cursor: pointer;
    border-color: @cascader-active-border-color;

    & > .@{prefix}-icon {
      color: @cascader-icon-color;
    }
  }

  &__placeholder {
    color: @cascader-light-color;
    margin-left: @cascader-content-margin-left;
  }

  &__content {
    margin-left: @cascader-content-margin-left;
    color: @cascader-dark-color;
    .text-ellipsis();
  }

  &__dropdown {
    margin: @cascader-dropdown-margin;
    box-shadow: @shadow-2;
    border-radius: @border-radius;
    cursor: default;
    padding: 0;
  }

  &__panel {
    display: flex;
    height: 100%;

    &.@{prefix}-cascader--normal {
      height: @cascader-panel-height-normal;
    }

    &.@{prefix}-cascader--multiple {
      height: @cascader-panel-height-multiple;
    }

    &.@{prefix}-cascader--tip {
      height: @cascader-panel-height-tips;
    }

    &--empty {
      width: 100%;
      height: @cascader-item-height-default;
      line-height: @cascader-item-height-default;
      color: @cascader-color-empty;
      margin: @cascader-menu-padding;
      text-align: center;
      padding-left: 0;

      &:hover {
        background: none;
        cursor: default;
      }
    }
  }

  &__menu {
    width: (@cascader-width-s - 2px);
    overflow: auto;
    box-sizing: content-box;
    padding: @cascader-menu-padding;
    background: @bg-color-container;

    &--segment {
      border-right: .5px solid @cascader-menu-segment-color;
    }
  }

  &__item {
    position: relative;
    height: @cascader-item-height-default;
    line-height: @cascader-item-height-default;
    color: @cascader-dark-color;
    padding: @cascader-item-padding;
    border-radius: @cascader-item-border-radius;
    margin-top: @cascader-item-margin-top;
    transition: background-color @anim-duration-base @anim-time-fn-ease-in;

    &.@{prefix}-is-disabled {
      color: @cascader-item-color-disabled;
      background-color: transparent;
      cursor: not-allowed;
    }
    &.@{prefix}-is-disabled {
      color: @cascader-item-color-disabled;
      background-color: transparent;
      cursor: not-allowed;
    }

    &.@{prefix}-is-expanded {
      background: @cascader-item-background-color-expanded;
      color: @cascader-highlight-color;

      .@{prefix}-icon-chevron-right {
        color: @cascader-highlight-color;
      }

      &:hover {
        cursor: pointer;
      }
    }

    &:first-child {
      margin-top: 0;
    }

    &-icon {
      color: @cascader-item-icon-color;
      .icon-position();

      .@{prefix}-icon-loading {
        color: @cascader-highlight-color;
      }
    }

    & .@{prefix}-checkbox {
      max-width: 100%;

      .@{prefix}-checkbox__input {
        flex-shrink: 0;
      }

      & .@{prefix}-checkbox__label {
        display: block;
        .text-ellipsis();

        .@{prefix}-cascader__item__label--filter {
          color: @cascader-highlight-color;
        }
      }
    }

    &--with-icon {
      padding: @cascader-item-padding-with-icon;
    }

    &--leaf {

      .@{prefix}-checkbox {
        width: 100%;
      }
    }

    &-label {
      display: block;
      position: relative;
      .text-ellipsis();

      &--ellipsis {
        width: 100%;
        height: 24px;
        position: absolute;
        left: 0;
        top: 50%;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-50%);

        .@{prefix}-popup__reference {
          width: 100%;
          height: 100%;

          .t-trigger {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }

      &--filter {
        color: @cascader-highlight-color;
      }
    }

    &:hover {
      background: @cascader-item-color-hover;
      cursor: pointer;
    }

    &.@{prefix}-is-selected {
      color: @cascader-item-color-selected;

      & .@{prefix}-checkbox__label {
        color: @cascader-item-color-selected;
      }
    }

    --ripple-color: @bg-color-container-active;
  }

  &__search-input {
    width: 100%;
    border: 0;
    background: transparent;
  }

  &__icon {
    color: @cascader-icon-color;
    display: flex;
    .icon-position();

    &.@{prefix}-is-expanded,
    &.@{prefix}-is-selected,
    &.@{prefix}-is-loading {
      background: transparent;
      color: @cascader-highlight-color;
    }
  }

  &--multiple {
    padding: @cascader-input-padding-is-multiple;

    &.@{prefix}-size-s {
      padding: @cascader-input-padding-is-multiple-s;
    }
  }

  .@{prefix}-input__inner {
    border: 0;
    padding: 0;
    margin-left: @cascader-content-margin-left;

    &:hover,
    &:focus {
      box-shadow: none;
      border-color: transparent;
    }
  }

  & .@{prefix}-tag {
    margin: @cascader-tag-margin;
  }

  &.@{prefix}-is-disabled {
    cursor: not-allowed;
    background-color: @cascader-tag-background-color-disabled;
    color: @cascader-item-color-disabled;
    border-color: @cascader-border-color-disabled;

    .@{prefix}-cascader__content {
      color: @cascader-color-empty;
    }
  }

  &.@{prefix}-is-active {
    border-color: @cascader-active-border-color;
    box-shadow: @cascader-input-shadow;
    transition: box-shadow @anim-duration-base @anim-time-fn-ease-in;

    .@{prefix}-fake-arrow {
      color: @cascader-highlight-color;
    }
  }

  &.@{prefix}-size-l {
    height: @cascader-item-height-l;
    font-size: @cascader-font-size-l;
    min-height: @cascader-height-l;

    &.@{prefix}-cascader-item--with-icon {
      padding: @cascader-item-padding-with-icon-l;
    }
  }

  &.@{prefix}-size-m {
    min-height: @cascader-height-default;
    font-size: @cascader-font-size-default;

    .@{prefix}-input__inner {
      height: @cascader-input-inner-height;
      line-height: @cascader-input-inner-height;
    }
  }

  &.@{prefix}-size-s {
    height: @cascader-item-height-s;
    line-height: @cascader-item-height-s;
    font-size: @cascader-font-size-s;
    min-height: @cascader-height-s;

    .@{prefix}-input__inner {
      height: calc(@cascader-height-s - 2px);
      line-height: calc(@cascader-height-default - 4px);
    }

    & .@{prefix}-tag {
      margin: @cascader-tag-margin-s;
    }
  }

  .@{prefix}-is-popup {
    border: 1px solid @cascader-highlight-color;
  }
}
